<template>
  <div class="recruit-detail">
    <!--轮播图-->
    <div class="carousel-box">
      <swiper :options="swiperOption" class="pic-box" ref="mySwiper" v-if=slideList.length>
        <swiper-slide v-for="(slide,index) in slideList" :key="index">
          <img :src="slide" class="pic"
               v-if="slide.indexOf('jpg') != -1 || slide.indexOf('png') != -1 || slide.indexOf('jpeg') != -1 || slide.indexOf('gif') != -1"
               onclick="return false"/>

          <video class="video-con" id="videoBox" :poster="slide + '?vframe/png/offset/0.001'" preload="auto"
                 webkit-playsinline="true" playsinline="true" controls="controls"
                 x5-playsinline="true" loop="loop"
                 style="object-fit:cover" v-else>
            <source :src="slide" type="video/mp4">
          </video>

          <div class="canvas-box" v-show="showDevice"></div>

        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
      <img src="./back2.png" class="back-pic" @click="toBack" onclick="return false"/>
    </div>

    <div class="work-box">
      <div class="work-con">
        <div class="work-con1">
          <span class="name">{{mechanismName}}</span>
          <div class="score" v-show="workInfo.reMoney">
            <img src="./return.png" class="fee-pic"/>
            <span class="fee-money">{{workInfo.reMoney}}</span>
          </div>
        </div>
        <div class="work-con4">
          <star :score="score/2"></star>
          <div class="lend" v-show="workInfo.lendType == 1">可借支</div>
        </div>
        <div class="work-con3">
          <span class="key" v-for="(key,index) in keyList" :key="index">{{key}}</span>
        </div>
        <div class="work-con2">
          <span class="work">{{workName}}</span>
          <span class="money">{{money}}</span>
        </div>
        <div class="work-con5">
          <span>招{{maxNumber}}人</span>&nbsp;<span v-if="status != 1">/&nbsp;已报名{{applyNum}}人</span>
          <span class="full" v-if="status == 1">待招聘</span>
        </div>
      </div>
      <div class="fee-box" v-if="feeDesc">
        <div class="title">返费奖励说明</div>
        <div class="content" v-html="feeDesc"></div>
      </div>
    </div>

    <div class="line-box"></div>

    <div class="desc-box">
      <div class="desc-con">
        <div class="title-box">
          <div class="line"></div>
          <div class="title">入职要求：</div>
        </div>
        <div class="content" v-html="workDemand" v-if="workDemand"></div>
        <div class="content" v-else><p>无</p></div>
      </div>
      <div class="desc-con">
        <div class="title-box">
          <div class="line"></div>
          <div class="title">薪资福利：</div>
        </div>
        <div class="content" v-html="workSalary" v-if="workSalary"></div>
        <div class="content" v-else><p>无</p></div>
      </div>
      <div class="desc-con">
        <div class="title-box">
          <div class="line"></div>
          <div class="title">住宿餐饮：</div>
        </div>
        <div class="content" v-html="eatSleep" v-if="eatSleep"></div>
        <div class="content" v-else><p>无</p></div>
      </div>
      <div class="desc-con">
        <div class="title-box">
          <div class="line"></div>
          <div class="title">工作性质：</div>
        </div>
        <div class="content" v-html="workTime" v-if="workTime"></div>
        <div class="content" v-else><p>无</p></div>
      </div>
      <div class="desc-con">
        <div class="title-box">
          <div class="line"></div>
          <div class="title">面试材料：</div>
        </div>
        <div class="content" v-html="workKnow" v-if="workKnow"></div>
        <div class="content" v-else><p>无</p></div>
      </div>
      <div class="desc-con">
        <div class="title-box">
          <div class="line"></div>
          <div class="title">其他说明：</div>
        </div>
        <div class="content" v-html="remarks" v-if="remarks"></div>
        <div class="content" v-else><p>无</p></div>
      </div>
    </div>

    <div class="line-box"></div>
    <!--企业简介-->
    <div class="brief-box">
      <div class="brief-con">
        <div class="title-box">
          <div class="line"></div>
          <div class="title">企业简介：</div>
        </div>
        <div class="content" v-html="brief"></div>
      </div>
      <div class="brief-con">
        <div class="title-box">
          <div class="line"></div>
          <div class="title">企业地址：</div>
        </div>
        <span class="address" v-html="briefAddr"></span>
      </div>
    </div>
    <div class="rate-box" @click="rateCompany">
      <span class="rate-title">查看员工对该企业的点评</span>
      <img src="./back.png" class="rate" onclick="return false"/>
    </div>

    <!--推荐企业-->
    <div class="recommend-box" v-show="showRecommend == 1">
      <div class="title-box">
        <span class="left-line"></span><span class="title">推荐企业</span><span class="right-line"></span>
      </div>
      <div class="recommend-con" v-for="(item,index) in recommendList" :key="index" @click="openWork(item.id)">
        <div class="recommend-list">
          <div class="logo-box">
            <img :src="item.mechanismUrl?item.mechanismUrl:require('./pic.png')" class="logo" onclick="return false"/>
            <div class="title" v-show="item.isApply == 0">已报名</div>
          </div>
          <div class="company-box">
            <div class="name">{{item.mechanismName}}</div>
            <star :score="score/2" class="stars"></star>
            <div class="key-box">
                  <span class="key" v-if="item.key!=null && item.key.length>0" v-for="(val,index) in item.key"
                        :key="index">{{val}}</span>
            </div>
            <div class="work-name">{{item.workTypeName}}</div>
            <div class="score-box">
              <span>招{{item.maxNumber}}人</span>&nbsp;<span
              v-if="item.status != 1">/&nbsp;已报名{{item.applyNumber}}人</span>
              <span class="full" v-if="item.status == 1">待招聘</span>
            </div>
          </div>
          <div class="num-box">
            <div class="fee" v-show="item.reStatus == 1 && item.reMoney > 0">
              <img src="./return.png" class="fee-pic2"/>
              <span class="fee-money2">{{item.reMoney}}</span>
            </div>

            <div class="lend" v-show="item.lendType == 1">可借支</div>
            <div class="money" v-if="item.postType == 1">{{item.workMoney}}元/小时</div>
            <div class="money" v-if="item.postType == 0">{{item.wageRange}}元/月</div>
          </div>
        </div>
      </div>
    </div>

    <div class="btn-box">
      <div class="share-box" @click="server">
        <img src="./server.png" class="share" onclick="return false"/>
        <div class="title">咨询</div>
      </div>
      <div class="entry-box" v-if="showBtn == 1" @click="openApply">入职报名</div>
      <div class="entry-box" v-else-if="showBtn == 2" @click="openCancel">取消报名</div>
      <div class="other-box" v-else-if="showBtn == 3">停止报名</div>
      <div class="other-box" v-else-if="showBtn == 4">禁止报名</div>
    </div>

    <!--咨询弹出层-->
    <div class="server-modal" v-show="showServer" @click="closeServer"></div>
    <div class="server-box" v-show="showServer">
      <div class="server-con">
        <div class="title">客服联系方式</div>
        <div class="desc">微信搜索客服号码即可添加客服微信</div>
        <div class="content-box">
          <div class="name">姓名：{{teacherName}}</div>
          <div class="mobile">电话：
            <span id="copy_text">{{teacherTel}}</span>
            <div class="copy" ref="copy" data-clipboard-action="copy" data-clipboard-target="#copy_text"
                 @click="copyMobile">复制号码
            </div>
          </div>
        </div>
        <div class="call-btn-box">
          <button type="button" class="call" @click="callMobile">立即拨打</button>
        </div>
      </div>
    </div>

    <!--入职报名弹出层-->
    <div class="apply-modal" v-show="showApply" @click="closeApplyModal"></div>
    <div class="apply-box" v-show="showApply">
      <div class="title">企业入职报名</div>
      <div class="apply-con">
        <span class="real">真实姓名:</span>
        <div class="name-box">
          <input type="text" placeholder="请填写真实姓名" v-model="realName" class="name" maxlength="6" @blur="inputBlur"/>
        </div>
      </div>
      <div class="press-box">
        <button type="button" class="confirm" @click="confirmApply">确定</button>
      </div>
    </div>

    <v-dialog v-model="sendVal" content="请问是否确认取消报名？" cancelText="取消" confirmText="确认" @confirm="cancelApply"
              @cancel="close"></v-dialog>

    <!--报名成功弹出层-->
    <div class="success-modal" v-show="showSuccess">
      <div class="success-box">
        <div class="bg-box"><img src="./bg.png" class="bg" onclick="return false"/></div>
        <div class="title" @click="interview">报名成功，查看详情&nbsp;>></div>
        <div class="success-con">
          <div class="name">姓名：{{name}}</div>
          <div class="company">报名企业：{{mechanismName}}</div>
        </div>
        <div class="suc-btn">
          <button type="button" class="detail" @click="referral">推荐分享</button>
        </div>
        <img src="./close.png" class="close" @click="closeSuccess" onclick="return false"/>
      </div>
    </div>

  </div>
</template>

<script>
  import {baseUrl} from "../../common/js/env"
  import star from "../../components/star/workstar"
  import Clipboard from 'clipboard'
  import {getSessionStore, getUserCookie, removeSessionStore, getDevice, getUrlKey} from "../../common/js/util"
  import dialog from "../../components/dialog/dialog"

  export default {
    inject: ['reload'],
    data() {
      return {
        swiperOption: {
          notNextTick: true,
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
          },
          autoplay: false,
          loop: true,
          observer: true,
          observeParents: true,
        },
        workId: "",
        slideList: [],
        feeDesc: "",
        workDemand: "",
        workSalary: "",
        eatSleep: "",
        workTime: "",
        workKnow: "",
        remarks: "",
        brief: "",
        briefAddr: "",
        mechanismName: "",
        score: "",
        workName: "",
        maxNumber: "",
        applyNum: "",
        money: "",
        keyList: [],
        recommendKeyList: [],
        status: "",
        showRecommend: 0,
        recommendList: [],
        userSign: "",
        teacherName: "",
        teacherTel: "",
        showServer: false,
        apply: "",
        userName: "",
        recruitSign: "",
        showBtn: 0,
        showApply: false,
        sendVal: false,
        reTime: "",
        reMoney: "",
        interviewTime: "",
        mechanismId: "",
        recruitAddress: "",
        realName: "",
        identity: "",
        showSuccess: false,
        name: "",
        id: "",
        workInfo: "",
        videoBox: "",
        showDevice: false,
        codeId: ""
      }
    },
    mounted() {
      window.scrollTo(0, 0);
      let base64 = require('js-base64').Base64;
      this.codeId = getUrlKey("codeId");//微信登录跳转
      if (this.codeId) {
        sessionStorage.setItem("user_sign", base64.encode(this.codeId));
      }

      if (this.$route.query.id) {
        this.workId = this.$route.query.id;
      } else {
        this.workId = getSessionStore("referralWorkId");
      }

      if (getSessionStore("user_sign")) {
        this.userSign = base64.decode(getSessionStore("user_sign"));
      }

      this.recruitSign = getSessionStore("recruit_sign");
      this.showDevice = getDevice() == 'android' ? true : false;
      this.getIdentity();
      this.queryWorkDetail();
      this.queryRecommend();
      this.queryIsApplyCollect();
      this.copyMobile();
    },
    methods: {
      getIdentity() {
        let upIdentity = sessionStorage.getItem("upIdentity");
        //如果是扫码进来的就取链接上面的，如果是直接登录进来的就取本身cookie里面的identity
        if (upIdentity) {
          this.identity = upIdentity; //取链接上面的,已经存好的
        } else {
          let user = getUserCookie();
          this.identity = user.identity; //取本身
        }
      },
      queryWorkDetail() {//查询招工详情
        this.$vux.loading.show({
          text: '加载中',
        });

        this.axios.get(baseUrl + "/work/query_workdetail?workId=" + this.workId).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0 && resultObj.data != null) {
            if (resultObj.data.imageList != null) {
              let picList = resultObj.data.imageList.split(";");//轮播图
              for (let i = 0, length = picList.length; i < length; i++) {
                this.slideList.push(picList[i]);
              }

              this.feeDesc = resultObj.data.reInstruction;//返费说明
              this.workDemand = resultObj.data.workDemand;//入职要求
              this.workSalary = resultObj.data.workSalary;//薪资福利
              this.eatSleep = resultObj.data.eatSleep;//住宿餐饮
              this.workTime = resultObj.data.workTime;//工作性质
              this.workKnow = resultObj.data.workKnow;//面试材料
              this.remarks = resultObj.data.remarks;//其他说明
              this.brief = resultObj.data.mechanismDetails;//公司简介
              this.briefAddr = resultObj.data.mechanismAddress;//公司地址
              this.mechanismName = resultObj.data.mechanismName;//企业名称
              this.score = resultObj.data.mechanismScore;//企业评分
              this.workName = resultObj.data.workTypeName;//岗位名称
              this.maxNumber = resultObj.data.maxNumber;//需求人数
              this.applyNum = resultObj.data.applyNumber;//已报名数
              this.money = resultObj.data.postType == 1 ? resultObj.data.workMoney + "元/小时" : resultObj.data.wageRange + "元/月";//工种0正式1小时
              this.status = resultObj.data.status; //招工状态0正在招工1已经招满

              this.reTime = resultObj.data.reTime; //返费时间（单位：月）
              this.reMoney = resultObj.data.reMoney; //返费金额
              this.interviewTime = resultObj.data.interviewTime; //面试时间
              this.mechanismId = resultObj.data.mechanismId; //企业id
              this.recruitAddress = resultObj.data.recruitAddress; //面试地址
              if (resultObj.data.key != null) {
                let key = resultObj.data.key.replace(/丨/g,"|").split("|"); //关键字
                for (let k = 0; k < key.length; k++) {
                  this.keyList.push(key[k]);
                }
              }
              this.workInfo = resultObj.data;
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
            return;
          }
        }).catch(() => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      queryRecommend() {//查询推荐企业
        this.axios.get(baseUrl + "/work/query_recommend_work?id=" + this.workId).then((res) => {
          let resultObj = res.data;
          if (resultObj.code == 0 && resultObj.data != null) {
            if (resultObj.data.length > 0) {
              this.showRecommend = 1;
              this.recommendList = resultObj.data;
              for (let i = 0, length = this.recommendList.length; i < length; i++) {
                if (this.recommendList[i].key != null) {
                  this.recommendList[i].key = this.recommendList[i].key.replace(/丨/g,"|").split("|").slice(0, 4);//关键字
                }
              }
            } else {
              this.showRecommend = 2;
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
            return;
          }
        }).catch(() => {
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      queryIsApplyCollect() {//查询是否已报名 、实名认证、咨询联系方式、收藏
        this.axios.get(baseUrl + "/work/query_isApplyOrIsCollection?sgin=" + this.userSign + "&workId=" + this.workId).then((res) => {
          let resultObj = res.data;
          if (resultObj.code == 0 && resultObj.data != null) {
            this.teacherTel = resultObj.data.teacher.teacherTel;//咨询联系方式
            this.teacherName = resultObj.data.teacher.teacherName;
            this.apply = resultObj.data.isApply;//0已报名 1未报名
            this.userName = resultObj.data.userName; //是否实名

            if (this.recruitSign == 1) {
              let role = getSessionStore("role");//判断角色，禁止报名
              if (role == 4 || role > 6) {
                this.showBtn = 4;
              }
              if (this.status == 1) {//停止报名
                this.showBtn = 3;
              } else if (this.apply == 0) {
                this.showBtn = 2;
              } else if (this.apply == 1) {
                this.showBtn = 1;
              }
            } else {//未登录
              if (this.status == 1) {//停止报名
                this.showBtn = 3;
              } else if (this.apply == 0) {
                this.showBtn = 2;
              } else if (this.apply == 1) {
                this.showBtn = 1;
              }
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
            return;
          }
        }).catch(() => {
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      openWork(id) {//招工详情
        this.$router.push({path: "/recruitdetail", query: {id: id}});
        this.reload();
      },
      copyMobile() {//复制号码
        let clipboard = new Clipboard(this.$refs.copy);
        clipboard.on('success', e => {
          this.$vux.toast.text("复制成功", "middle");
          clipboard.destroy();// 释放内存
          this.showServer = false;
        });
        clipboard.on('error', e => {
          this.$vux.toast.text("复制失败，请手动复制", "middle");
          clipboard.destroy();
          this.showServer = false;
        });
      },
      callMobile() {//立即拨打
        window.location.href = 'tel://' + this.teacherTel;
        this.showServer = false;
      },
      server() {//咨询
        this.showServer = true;
      },
      inputBlur() {
        window.scrollTo(0, 0);
      },
      openApply() {//打开报名弹出层
        let reg = /^\+?[1-9][0-9]*$/;
        if (reg.test(parseInt(this.userSign))) {
          if (this.userName != "" && this.userName != undefined) {//实名
            this.entryApply(this.userName);
          } else {
            this.showApply = true;
          }
        } else {
          this.$vux.toast.text("请先登录", "middle");
          setTimeout(() => {
            sessionStorage.setItem("workdetail_sign", "001155"); //登录后返回详情标识
            this.$router.push({path: "/login", query: {id: this.workId}});
          }, 50);
        }
      },
      confirmApply() {//确定报名
        if (this.checkName(this.realName)) {
          this.entryApply(this.realName);
        }
      },
      openCancel() {//打开取消报名
        this.sendVal = true;
      },
      closeSuccess() {//关闭报名成功
        this.showSuccess = false;
      },
      closeServer() {//关闭咨询弹出层
        this.showServer = false;
      },
      close() {//关闭取消报名
        this.sendVal = false;
      },
      closeApplyModal() {
        this.showApply = false;
      },
      entryApply(name) {//入职报名
        this.$vux.loading.show({
          text: '加载中',
        });

        this.name = name;
        let data = {
          "reTime": this.reTime,
          "reMoney": this.reMoney,
          "identity": this.identity,
          "interviewTime": this.interviewTime,
          "mechanismId": this.mechanismId,
          "userName": this.name,
          "workId": this.workId,
          "recruitAddress": this.recruitAddress,
          "mechanismName": this.mechanismName,
          "type": 1
        };

        this.axios.post(baseUrl + "/work/entryApply?sgin=" + this.userSign + "&type=1", data).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0 && resultObj.data != null) {
            if (resultObj.data == 0) {
              this.$vux.toast.text("入职报名失败,请稍后重试!", "middle");
            } else {
              this.id = resultObj.data;
              this.showApply = false;
              this.showBtn = 2;
              this.showSuccess = true;
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch(() => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      cancelApply() {//取消报名
        this.$vux.loading.show({
          text: '加载中',
        });
        let data = {};
        this.axios.post(baseUrl + "/work/cancleApply?sgin=" + this.userSign + "&workId=" + this.workId, data).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0 && resultObj.data != null) {
            if (resultObj.data == 0) {
              this.$vux.toast.text("取消报名失败,请稍后重试!", "middle");
            } else {
              this.sendVal = false;
              this.reload();
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch(() => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      checkName(name) {//校验姓名
        let reg = /^[\u2E80-\u9FFF]+$/;
        if (name == null || name == "") {
          this.$vux.toast.text("请输入您的姓名");
          return;
        } else if (!reg.test(name)) {
          this.$vux.toast.text("请输入您的中文姓名");
          return;
        } else if (name.length > 6) {
          this.$vux.toast.text("姓名最多6位");
          return;
        }
        return true;
      },
      referral() {//推荐分享
        this.closeSuccess();
        this.$router.push({path: '/referral', query: {"interviewId": this.id}});
      },
      interview() {//面试预约列表
        this.closeSuccess();
        this.$router.push({path: '/interview'});
      },
      rateCompany() {//点评企业
        this.$router.push({path: '/mechanism', query: {"id": this.mechanismId, "name": this.mechanismName}});
      },
      toBack() {
        if (getSessionStore("interviewType") == 1) {
          removeSessionStore("interviewType");
          this.$router.push({path: '/interview'});
        } else {
          this.$router.push({path: '/recruitlist'});
        }
      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper;
      }
    },
    components: {
      star,
      "v-dialog": dialog
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../common/stylus/mixin.styl"

  .recruit-detail
    wh(100%, auto)
    .carousel-box
      position: relative
      wh(100%, 7.453rem)
      .pic-box
        wh(100%, 7.453rem)
        .pic
          wh(100%, 7.453rem)
        .video-con
          wh(100%, 7.453rem)
        .canvas-box
          position: absolute
          bottom: 0
          z-index: 9999
          wh(100%, 40%)
          background: #FFF
          opacity: 0
      .back-pic
        position: fixed
        top: 0.24rem
        left: 0.32rem
        z-index: 1
        wh(0.747rem, 0.747rem)

    .work-box
      margin: 0 auto
      wh(93.6%, auto)
      background: rgba(255, 255, 255, 1)
      .work-con
        wh(100%, auto)
        border-bottom: 0.027rem solid rgba(245, 245, 245, 1)
        .work-con1
          fj(space-between, center)
          padding-top: 0.44rem
          padding-bottom: 0.16rem
          .name
            size-color(0.453rem, rgba(51, 51, 51, 1))
            font-weight: 500
          .score
            display: flex
            align-items: center
            position: relative
            .fee-pic
              position: absolute
              left: -0.427rem
              wh(0.853rem, 0.853rem)
            .fee-money
              text-align: center
              line-height: 0.56rem
              wh(1.733rem, 0.56rem)
              background: rgba(255, 242, 217, 1)
              border: 0.027rem solid rgba(255, 210, 145, 1)
              border-top-right-radius: 0.267rem
              border-bottom-right-radius: 0.267rem
              size-color(0.427rem, rgba(255, 148, 69, 1))
              font-weight: 500
        .work-con4
          fj(space-between, center)
          margin-bottom: 0.32rem
          .lend
            fj(center, center)
            wh(1.173rem, 0.427rem)
            border: 0.013rem solid rgba(60, 175, 255, 1)
            border-radius(0.027rem)
            size-color(0.293rem, rgba(60, 175, 255, 1))
        .work-con2
          fj(space-between, center)
          margin-bottom: 0.24rem
          .work
            size-color(0.427rem, rgba(60, 175, 255, 1))
            font-weight: 500
          .money
            size-color(0.427rem, rgba(255, 89, 89, 1))
            font-weight: 500
        .work-con3
          display: flex
          flex-wrap: wrap
          size-color(0.293rem, rgba(128, 128, 128, 1))
          padding-bottom: 0.2rem
          .key
            margin-right: 0.16rem
            margin-bottom: 0.2rem
            padding: 0.067rem 0.133rem
            background: rgba(245, 246, 247, 1)
            border-radius(0.053rem)
            &:last-child
              margin-right: 0
        .work-con5
          padding-bottom: 0.493rem
          size-color(0.347rem, rgba(153, 153, 153, 1))
          .full
            margin-left: 0.15rem
            padding: 0.04rem 0.107rem
            line-height: 0.373rem
            background: rgba(255, 142, 89, 1)
            border-radius(0.053rem)
            size-color(0.293rem, rgba(255, 255, 255, 1))
            font-weight: 500
      .fee-box
        wh(100%, auto)
        padding-bottom: 0.533rem
        .title
          wh(2.293rem, 0.587rem)
          text-align: center
          line-height: 0.587rem
          margin-bottom: 0.4rem
          size-color(0.347rem, rgba(255, 142, 89, 1))
          background: rgba(255, 242, 217, 1)
          border-bottom-left-radius: 0.16rem
          border-bottom-right-radius: 0.16rem
          font-weight: 500
        .content
          margin-right: 0.28rem
          size-color(0.373rem, rgba(128, 128, 128, 1))
          font-weight: 500
          line-height: 0.48rem
          >>> p
            size-color(0.373rem, rgba(128, 128, 128, 1))
            font-weight: 500
            line-height: 0.48rem
    .desc-box
      margin: 0 auto
      wh(92.53%, auto)
      .desc-con
        padding-top: 0.6rem
        wh(100%, auto)
        &:last-child
          padding-bottom: 0.533rem
      .title-box
        display: flex
        align-items: center
        margin-bottom: 0.36rem
        .line
          wh(0.08rem, 0.4rem)
          background: rgba(60, 175, 255, 1)
        .title
          margin-left: 0.28rem
          size-color(0.427rem, rgba(51, 51, 51, 1))
          font-weight: 500
      .content
        wh(100%, auto)
        size-color(0.373rem, rgba(153, 153, 153, 1))
        line-height: 0.48rem
        >>> p
          size-color(0.373rem, rgba(153, 153, 153, 1))
          line-height: 0.48rem
    .line-box
      wh(100%, 0.28rem)
      background: rgba(242, 242, 242, 1)
    .brief-box
      margin: 0 auto
      wh(92.53%, auto)
      .brief-con
        padding-top: 0.6rem
        wh(100%, auto)
        &:last-child
          margin-bottom: 0.56rem
        .title-box
          display: flex
          align-items: center
          margin-bottom: 0.427rem
          .line
            wh(0.08rem, 0.4rem)
            background: rgba(60, 175, 255, 1)
          .title
            margin-left: 0.28rem
            size-color(0.427rem, rgba(51, 51, 51, 1))
            font-weight: 500
        .content
          text-indent: 0.2rem
          size-color(0.373rem, rgba(153, 153, 153, 1))
          line-height: 0.48rem
        .address
          size-color(0.373rem, rgba(153, 153, 153, 1))
    .rate-box
      display: flex
      align-items: center
      wh(100%, 1.173rem)
      border-top: 0.027rem solid rgba(242, 242, 242, 1)
      .rate-title
        margin-left: 3.33%
        size-color(0.373rem, rgba(60, 175, 255, 1))
      .rate
        margin-left: auto
        margin-right: 0.333rem
        wh(0.48rem, 0.48rem)
    .recommend-box
      wh(100%, auto)
      .title-box
        fj(center, center)
        wh(100%, 0.88rem)
        line-height: 0.88rem
        background: rgba(242, 242, 242, 1)
        .title
          padding-left: 0.533rem
          padding-right: 0.533rem
          size-color(0.373rem, rgba(153, 153, 153, 1))
        .left-line
          display: block
          wh(1.6rem, 0.027rem)
          background: rgba(230, 230, 230, 1)
        .right-line
          display: block
          wh(1.6rem, 0.027rem)
          background: rgba(230, 230, 230, 1)
      .recommend-con
        overflow: hidden
        wh(100%, auto)
        border-bottom: 0.013rem solid rgba(230, 230, 230, 1)
        &:last-child
          padding-bottom: 1.333rem
        .recommend-list
          display: flex
          wh(100%, 3.707rem)
          border-bottom: 0.027rem solid rgba(245, 245, 245, 1)
          overflow: hidden
          .logo-box
            position: relative
            margin-top: 0.533rem
            margin-left: 0.28rem
            wh(2.133rem, 1.6rem)
            .logo
              wh(100%, 100%)
              border-radius: 0.16rem
          .title
            position: absolute
            bottom: 0
            fj(center, center)
            wh(100%, 0.48rem)
            background: rgba(0, 0, 0, 0.7)
            border-bottom-left-radius: 0.16rem
            border-bottom-right-radius: 0.16rem
            size-color(0.333rem, rgba(255, 255, 255, 1))
          .company-box
            margin-left: 0.28rem
            margin-top: 0.533rem
            .name
              size-color(0.4rem, rgba(51, 51, 51, 1))
              font-weight: 500
              margin-bottom: 0.173rem
            .stars
              margin-bottom: 0.267rem
            .key-box
              display: flex
              align-items: center
              margin-bottom: 0.32rem
              .key
                padding: 0.053rem 0.107rem
                margin-right: 0.1rem
                background: rgba(245, 246, 247, 1)
                border-radius(0.053rem)
                size-color(0.293rem, rgba(128, 128, 128, 1))
                &:last-child
                  margin-right: 0
            .work-name
              margin-bottom: 0.28rem
              size-color(0.373rem, rgba(60, 175, 255, 1))
              font-weight: 500
            .score-box
              display: flex
              align-items: center
              size-color(0.32rem, rgba(153, 153, 153, 1))
              .full
                margin-left: 0.15rem
                text-align: center
                padding: 0.04rem 0.107rem
                line-height: 0.373rem
                background: rgba(255, 142, 89, 1)
                border-radius(0.053rem)
                size-color(0.293rem, rgba(255, 255, 255, 1))
                font-weight: 500
          .num-box
            display: flex
            flex-direction: column
            align-items: flex-end
            margin-top: 0.533rem
            margin-left: auto
            margin-right: 0.28rem
            position: relative
            .fee
              display: flex
              align-items: center
              position: relative
              .fee-pic2
                position: absolute
                left: -0.427rem
                wh(0.853rem, 0.853rem)
              .fee-money2
                text-align: center
                line-height: 0.56rem
                wh(1.733rem, 0.56rem)
                background: rgba(255, 242, 217, 1)
                border: 0.027rem solid rgba(255, 210, 145, 1)
                border-top-right-radius: 0.267rem
                border-bottom-right-radius: 0.267rem
                size-color(0.427rem, rgba(255, 148, 69, 1))
                font-weight: 500
            .lend
              fj(center, center)
              position: absolute
              right: 0
              bottom: 0.213rem
              wh(1.173rem, 0.427rem)
              border: 0.013rem solid rgba(60, 175, 255, 1)
              border-radius(0.027rem)
              size-color(0.293rem, rgba(60, 175, 255, 1))
            .money
              position: absolute
              right: 0
              top: 1.933rem
              width: 3.2rem
              text-align: right
              size-color(0.373rem, rgba(255, 89, 89, 1))
              font-weight: 500
    .btn-box
      display: flex
      wh(100%, 1.333rem)
      position: fixed
      bottom: 0
      .share-box
        fj(center, center)
        flex-direction: column
        flex: 1
        height: 1.333rem
        border-right: 0.013rem solid rgba(238, 238, 238, 1)
        background: #FFF
        .share
          wh(0.56rem, 0.56rem)
          padding-bottom: 0.08rem
        .title
          padding-top: 0.08rem
          size-color(0.293rem, rgba(66, 66, 66, 1))
      .entry-box
        flex: 1
        text-align: center
        height: 1.333rem
        line-height: 1.333rem
        background: rgba(60, 175, 255, 1)
        size-color(0.48rem, rgba(255, 255, 255, 1))
      .other-box
        flex: 1
        text-align: center
        height: 1.333rem
        line-height: 1.333rem
        background: rgba(146, 146, 146, 1)
        size-color(0.48rem, rgba(255, 255, 255, 1))
    .server-modal
      position: fixed
      top: 0
      left: 0
      right: 0
      bottom: 0
      z-index: 100
      background-color: rgba(0, 0, 0, 0.5)
    .server-box
      position: fixed
      top: 0
      left: 0
      right: 0
      bottom: 0
      z-index: 100
      margin: auto
      wh(8rem, 6.533rem)
      .server-con
        position: relative
        wh(100%, 100%)
        background: rgba(255, 255, 255, 1)
        border-radius(0.16rem)
        .title
          padding-top: 0.64rem
          padding-bottom: 0.307rem
          text-align: center
          size-color(0.48rem, rgba(51, 51, 51, 1))
          font-weight: 500
        .desc
          text-align: center
          padding-bottom: 0.507rem
          size-color(0.373rem, rgba(204, 204, 204, 1))
        .content-box
          margin: 0 auto
          wh(6.933rem, 2rem)
          background: rgba(245, 247, 250, 1)
          border-radius(0.133rem)
          margin-bottom: 0.64rem
          .name
            padding-top: 0.467rem
            padding-bottom: 0.32rem
            margin-left: 0.427rem
            size-color(0.4rem, rgba(102, 102, 102, 1))
          .mobile
            display: flex
            margin-left: 0.427rem
            size-color(0.4rem, rgba(102, 102, 102, 1))
            .copy
              padding-left: 0.84rem
              size-color(0.373rem, rgba(60, 175, 255, 1))

        .call-btn-box
          wh(6.933rem, 1.067rem)
          margin: 0 auto
          .call
            text-align: center
            line-height: 1.067rem
            wh(6.933rem, 1.067rem)
            background: rgba(60, 175, 255, 1)
            border-radius(0.16rem)
            size-color(0.453rem, rgba(255, 255, 255, 1))
    .apply-modal
      position: fixed
      top: 0
      left: 0
      right: 0
      bottom: 0
      z-index: 98
      display: flex
      align-items: center
      justify-content: center
      background-color: rgba(0, 0, 0, 0.5)
    .apply-box
      position: fixed
      top: 0
      left: 0
      right: 0
      bottom: 0
      z-index: 98
      margin: auto
      wh(8rem, 4.72rem)
      background: rgba(255, 255, 255, 1)
      border-radius(0.173rem)
      .title
        padding-top: 0.64rem
        padding-bottom: 0.64rem
        text-align: center
        size-color(0.48rem, rgba(51, 51, 51, 1))
        font-weight: 500
      .apply-con
        display: flex
        align-items: center
        justify-content: space-between
        padding-bottom: 0.4rem
        .real
          padding-left: 0.533rem
          size-color(0.427rem, rgba(51, 51, 51, 1))
        .name-box
          display: flex
          align-items: center
          margin-right: 0.533rem
          wh(4.8rem, 0.96rem)
          border: 0.027rem solid rgba(224, 224, 224, 1)
          border-radius(0.16rem)
          .name
            padding-left: 0.1rem
            wh(90%, 0.6rem)
            line-height: 0.6rem
            size-color(0.44rem, rgba(147, 147, 147, 1))
      .press-box
        margin: 0 auto
        wh(6.933rem, 1.067rem)
        .confirm
          background: rgba(60, 175, 255, 1)
          border-radius(0.16rem)
          wh(6.933rem, 1.067rem)
          line-height: 1.067rem
          text-align: center
          size-color(0.453rem, rgba(255, 255, 255, 1))
    .success-modal
      position: fixed
      top: 0
      left: 0
      right: 0
      bottom: 0
      z-index: 98
      display: flex
      align-items: center
      justify-content: center
      background-color: rgba(0, 0, 0, 0.5)
      .success-box
        position: fixed
        top: 0
        left: 0
        right: 0
        bottom: 0
        z-index: 98
        margin: auto
        wh(8rem, 8.693rem)
        background: rgba(255, 255, 255, 1)
        border-radius(0.16rem)
        .bg-box
          wh(100%, 2.107rem)
          .bg
            wh(100%, 100%)
        .title
          padding-top: 0.8rem
          padding-bottom: 0.627rem
          text-align: center
          size-color(0.453rem, rgba(60, 175, 255, 1))
          font-weight: 500
        .success-con
          margin: 0 auto
          wh(6.933rem, 2rem)
          background: rgba(245, 247, 250, 1)
          border-radius(0.133rem)
          margin-bottom: 0.8rem
          display: flex
          flex-direction: column
          justify-content: center
          .name
            margin-left: 0.427rem
            padding-bottom: 0.16rem
            size-color(0.4rem, rgba(102, 102, 102, 1))
          .company
            width: 90%
            margin-left: 0.427rem
            padding-top: 0.16rem
            size-color(0.4rem, rgba(102, 102, 102, 1))
            ellipsis()
        .suc-btn
          fj(center, center)
          wh(6.933rem, 1.067rem)
          margin: 0 auto
          .detail
            line-height: 1.067rem
            text-align: center
            wh(6.933rem, 1.067rem)
            size-color(0.427rem, rgba(255, 255, 255, 1))
            background: rgba(60, 175, 255, 1)
            border-radius(0.16rem)
        .close
          position: absolute
          bottom: -1.5rem
          left: 0
          right: 0
          margin: auto
          wh(0.8rem, 0.8rem)
</style>
